<template>
	<!-- V3 支持多个跟节点， 建议一个 -->
	<view>
		<view class="">
			count: {{count}}
		</view>
		<view class="">
			doubelCount: {{ doubelCount }}
		</view>
		<button @click="count++">+1</button>
		<view class="">
			<!--  模板访问ref声明的数据的时候， 是不需要手动访问 value 属性 -->
			{{ message }}
		</view>
		<button @click="editMessage">点我</button>
		<view class="">
			我是{{data.name}}, 今年{{data.age}}岁了，性别{{data.sex}}
		</view>
		<button @click="data.age++">点我 age++</button>
		<button @click="handleAddAge">点我 age++</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		computed
	} from 'vue'
	// 定义数据
	const count = ref(1)
	const message = ref('hello uni-app Vue3 !!')
	// 定义对象数据
	const data = reactive({
		name: '张三',
		age: 18,
		sex: '男'
	})

	// 定义方法
	const editMessage = () => {
		// 通过 ref 定义的数据， 读取或者修改必须访问 value
		message.value = "今天大家考的不错， 今晚不用加班了！！！！"
	}
	const handleAddAge = () => {
		data.age++
	}
	// 生命周期


	// 监听器
	watch(count, (newValue, oldValue) => {
		console.log('老值： ', oldValue)
		console.log('count 发生改变了！！')
		console.log('新值： ', newValue)
	}, {
		// 立即执行
		immediate: true,
		// 深度监听
		deep: true
	})
	// 计算属性: 当里面的依赖的内容发生改变， 会重新计算
	//    依赖的值不改变， 就会总上一次的结果直接获取值（缓存）
	const doubelCount = computed(() => {
		return count.value * 2
	})
</script>